<template>
  <div class="order-info">
    <van-nav-bar title="网易收银台" left-arrow @click-left="onClickLeft" />
    <div class="totalPrice">
      <span>￥</span>
      <strong>{{orderTotalPrice|flootPirce}}</strong>
    </div>
    <div class="pay-icon">
      <i class="iconfont">&#xe6ad;</i>
      <span>网易支付</span>
    </div>
    <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell title="微信扫码" clickable @click="radio = '1'">
          <template #icon>
            <img src="../../public/img/wx-icon.png" width="24" height="24" />
          </template>
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="微信支付" clickable @click="radio = '2'">
          <template #icon>
            <img src="../../public/img/wx-icon.png" width="24" height="24" />
          </template>
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <div class="pay-btn">
      <van-button round type="danger" size="large">微信支付{{orderTotalPrice|price}}</van-button>
    </div>
  </div>
</template>

<script>
import { subimtPayOrder } from "@/request/api";
export default {
  data() {
    return {
      orderTotalPrice: 0, //拿到总价,
      radio: 1
    };
  },
  created() {
    this.orderTotalPrice = this.$route.params.orderTotalPrice;
    if (this.orderTotalPrice === undefined) {
      this.$router.replace("/shopping");
      return;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less">
.totalPrice {
  color: #f00;
  text-align: center;
  background-color: #fff;
  padding: 15px 0;
  font-weight: bold;
  span {
    font-size: 16px;
  }
  strong {
    font-size: 1.5rem;
  }
  em {
    font-size: 16px;
    font-style: normal;
  }
}
.pay-icon {
  background: #242424;
  margin: 0 auto;
  line-height: 60px;
  width: 99%;
  height: 60px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  i {
    color: #c20c0c;
    margin-left: 15px;
    font-size: 20px;
    display: inline-block;
  }
  span {
    margin-left: 10px;
    display: inline-block;
  }
}
.van-cell__title {
  padding-left: 10px;
}
.pay-btn {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  .van-button--large {
    height: 40px;
  }
}
</style>